<template>
  <div class="mall page" ref="webview">
    <div class="mall-search">
      <div class="van-icon van-icon-arrow-left" @click="$router.go(-1)"></div>
      <div class="search">
        <van-field v-model="textValue" readonly class="input" @click="goSearch" :clearable='true' placeholder="搜索商品/店铺">
          <template #left-icon>
            <i class="icon-search"></i>
          </template>
        </van-field>
      </div>
    </div>
    <div class="content">
      <div class="sidebar">
        <van-sidebar v-model="activeKey" @change="onChangeSidebar">
          <!-- <van-sidebar-item :key="-1" title="全部" /> -->
          <van-sidebar-item v-for="(item,index) in cateType" :key="index" :title="item.cat_name" />
        </van-sidebar>
      </div>
      <div class="classType flex" :class="{flex:cateList.length > 2 }">
        <div class="nodata" style="height:300px;" v-if="cateList.length === 0">暂无数据</div>
        <template v-for="(item,index) in cateList">
          <CateList :cateItem="item" @change="goClassList" :key="index" />
        </template>
      </div>
    </div>
    <tab-bar v-model="isActive"></tab-bar>
  </div>
</template>
<script>
export default {
  name: 'mall',
  data () {
    return {
      isActive: 2,
      activeKey: 0,
      cateType: [],
      textValue: '',
      cateList: []
    };
  },
  components: {
  },
  // 缓存了页面使用 created钩子
  created () {
    this.getCateType((pid) => {
      this.getCateList(pid);
    });
  },
  methods: {
    // 跳转搜索
    goSearch () {
      this.$router.push({ 'path': '/search' });
    },
    onChangeSidebar (index) {
      this.getCateList(this.cateType[index].id);
    },
    goClassList (data) {
      this.$router.push({ 'path': '/mall/list', query: { id: data.id } });
    },
    getCateType (callbark) {
      this.$toast.loading({ duration: 0 });
      this.$API.goods.type().then(res => {
        if (!res.code) {
          this.cateType = res.data;
          console.log(res.data);
          callbark && callbark(res.data && res.data[0] && res.data[0].id);
          this.$toast.clear();
        }
      });
    },
    getCateList (pid) {
      this.$toast.loading({ duration: 0 });
      this.$API.goods.catelist({ pid: pid }).then(res => {
        if (!res.code) {
          this.cateList = res.data;
          this.$toast.clear();
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.mall {
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .content {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    border-bottom: 1px solid #eee; /*no*/
  }
  .sidebar {
    width: 164px;
    background-color: #f1f3f7;
    margin-right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 99;
  }
  .van-sidebar {
    width: 164px;
    .van-sidebar-item {
      text-align: center;
      position: relative;
      border-bottom: 1px solid #fff; /*no*/
      background-color: #f1f3f7;
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: -2px; /*no*/
        left: 0;
        bottom: -1px;
        width: 5px;
      }
    }
    .van-sidebar-item.van-sidebar-item--select {
      color: #ff0034;
      border-left: none;
      border-bottom: none;
      background-color: #fff;
      &::before {
        background-color: #ff0034;
      }
    }
  }
}
</style>
